<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐系统管理平台</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .main-container {
            padding: 20px;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
        }
        .stats-card {
            text-align: center;
            padding: 30px;
            border-radius: 8px;
            color: white;
            transition: transform 0.3s;
        }
        .stats-card:hover {
            transform: translateY(-5px);
        }
        .stats-card h3 {
            font-size: 36px;
            margin: 10px 0;
        }
        .bg-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .bg-green { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .bg-orange { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .bg-red { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
        
        .music-player {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .player-controls {
            text-align: center;
            margin-top: 15px;
        }
        .player-controls button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="layui-container main-container">
        <!-- 页面头部 -->
        <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h1><i class="layui-icon layui-icon-music"></i> 音乐系统管理平台</h1>
                    <p>欢迎使用音乐管理系统，这里可以管理音乐、歌手、专辑、用户等信息</p>
                </div>
                <div>
                    <span style="margin-right: 15px;">欢迎, <span id="currentUsername">用户</span></span>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="logout()">
                        <i class="layui-icon layui-icon-logout"></i> 退出登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="stats-card bg-blue">
                    <i class="layui-icon layui-icon-music" style="font-size: 48px;"></i>
                    <h3 id="musicCount">0</h3>
                    <p>音乐总数</p>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card bg-green">
                    <i class="layui-icon layui-icon-user" style="font-size: 48px;"></i>
                    <h3 id="singerCount">0</h3>
                    <p>歌手总数</p>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card bg-orange">
                    <i class="layui-icon layui-icon-template-1" style="font-size: 48px;"></i>
                    <h3 id="albumCount">0</h3>
                    <p>专辑总数</p>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card bg-red">
                    <i class="layui-icon layui-icon-group" style="font-size: 48px;"></i>
                    <h3 id="userCount">0</h3>
                    <p>用户总数</p>
                </div>
            </div>
        </div>

        <!-- 音乐播放器 -->
        <div class="card music-player">
            <h3><i class="layui-icon layui-icon-play"></i> 音乐播放器</h3>
            <div id="currentMusic" style="margin: 15px 0;">
                <p>当前播放：<span id="musicName">暂无播放</span></p>
                <p>歌手：<span id="musicSinger">--</span></p>
            </div>
            <div class="player-controls">
                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="prevMusic()">
                    <i class="layui-icon layui-icon-prev"></i> 上一曲
                </button>
                <button class="layui-btn layui-btn-lg" onclick="playMusic()" id="playBtn">
                    <i class="layui-icon layui-icon-play"></i> 播放
                </button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="nextMusic()">
                    <i class="layui-icon layui-icon-next"></i> 下一曲
                </button>
            </div>
        </div>

        <!-- 功能选项卡 -->
        <div class="card">
            <div class="layui-tab layui-tab-brief" lay-filter="mainTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">音乐管理</li>
                    <li>歌手管理</li>
                    <li>专辑管理</li>
                    <li>用户管理</li>
                    <li>歌单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- 音乐管理 -->
                    <div class="layui-tab-item layui-show">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" onclick="addMusic()">
                                <i class="layui-icon layui-icon-add-1"></i> 添加音乐
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshMusicList()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                        <table class="layui-hide" id="musicTable" lay-filter="musicTable"></table>
                    </div>
                    
                    <!-- 歌手管理 -->
                    <div class="layui-tab-item">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" onclick="addSinger()">
                                <i class="layui-icon layui-icon-add-1"></i> 添加歌手
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshSingerList()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                        <table class="layui-hide" id="singerTable" lay-filter="singerTable"></table>
                    </div>
                    
                    <!-- 专辑管理 -->
                    <div class="layui-tab-item">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" onclick="addAlbum()">
                                <i class="layui-icon layui-icon-add-1"></i> 添加专辑
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshAlbumList()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                        <table class="layui-hide" id="albumTable" lay-filter="albumTable"></table>
                    </div>
                    
                    <!-- 用户管理 -->
                    <div class="layui-tab-item">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshUserList()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
                    </div>
                    
                    <!-- 歌单管理 -->
                    <div class="layui-tab-item">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" onclick="addPlaylist()">
                                <i class="layui-icon layui-icon-add-1"></i> 创建歌单
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshPlaylistList()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                        <table class="layui-hide" id="playlistTable" lay-filter="playlistTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="res/layui/layui.js"></script>
    <script>
        const API_BASE = 'http://localhost:8080';
        let isPlaying = false;
        let currentMusicList = []; // 当前音乐列表
        let currentMusicIndex = -1; // 当前播放音乐的索引
        
        // 检查登录状态
        function checkLogin() {
            var userInfo = localStorage.getItem('userInfo');
            if (!userInfo) {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
                return false;
            }
            // 显示用户名
            var user = JSON.parse(userInfo);
            document.getElementById('currentUsername').textContent = user.username || '用户';
            return true;
        }
        
        // 退出登录
        function logout() {
            layui.layer.confirm('确定要退出登录吗？', {icon: 3, title: '提示'}, function(index){
                localStorage.removeItem('userInfo');
                localStorage.removeItem('token');
                layui.layer.msg('已退出登录', {icon: 1, time: 1000}, function(){
                    window.location.href = 'login.html';
                });
                layui.layer.close(index);
            });
        }
        
        // 页面加载时检查登录
        if (!checkLogin()) {
            // 如果未登录，脚本会在checkLogin中跳转，这里不再继续执行
        }

        layui.use(['table', 'layer', 'form', 'element', 'laydate'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var element = layui.element;
            var laydate = layui.laydate;
            
            // 将layui对象设为全局，以便在弹窗中使用
            window.layui = layui;

            // 加载统计数据
            loadStats();

            // 音乐表格
            table.render({
                elem: '#musicTable',
                url: API_BASE + '/music/list',
                page: true,
                limit: 10,
                parseData: function(res){ // 解析后端返回的数据
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || '',
                        "count": res.data.total || 0,
                        "data": res.data.records || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'name', title: '歌曲名称', width: 200},
                    {field: 'duration', title: '时长(秒)', width: 100},
                    {field: 'playCount', title: '播放次数', width: 120, sort: true},
                    {field: 'releaseTime', title: '发行时间', width: 180},
                    {field: 'status', title: '状态', width: 100, templet: function(d){
                        return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                    }},
                    {fixed: 'right', title: '操作', width: 200, toolbar: '#musicToolbar'}
                ]]
            });

            // 歌手表格
            table.render({
                elem: '#singerTable',
                url: API_BASE + '/singer/list',
                page: true,
                limit: 10,
                parseData: function(res){
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || '',
                        "count": res.data.total || 0,
                        "data": res.data.records || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'name', title: '歌手名', width: 150},
                    {field: 'type', title: '类型', width: 100},
                    {field: 'nationality', title: '国籍', width: 100},
                    {field: 'tags', title: '风格标签', width: 200},
                    {field: 'introduction', title: '简介'},
                    {field: 'status', title: '状态', width: 100, templet: function(d){
                        return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                    }},
                    {fixed: 'right', title: '操作', width: 200, toolbar: '#singerToolbar'}
                ]]
            });

            // 专辑表格
            table.render({
                elem: '#albumTable',
                url: API_BASE + '/album/list',
                page: true,
                limit: 10,
                parseData: function(res){
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || '',
                        "count": res.data.total || 0,
                        "data": res.data.records || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'name', title: '专辑名称', width: 200},
                    {field: 'company', title: '发行公司', width: 150},
                    {field: 'releaseDate', title: '发行日期', width: 150},
                    {field: 'introduction', title: '简介'},
                    {field: 'status', title: '状态', width: 100, templet: function(d){
                        return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                    }},
                    {fixed: 'right', title: '操作', width: 200, toolbar: '#albumToolbar'}
                ]]
            });

            // 用户表格
            table.render({
                elem: '#userTable',
                url: API_BASE + '/user/list',
                page: true,
                limit: 10,
                parseData: function(res){
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || '',
                        "count": res.data.total || 0,
                        "data": res.data.records || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'username', title: '用户名', width: 150},
                    {field: 'phone', title: '手机号', width: 130},
                    {field: 'email', title: '邮箱', width: 180},
                    {field: 'registerTime', title: '注册时间', width: 180},
                    {field: 'status', title: '状态', width: 100, templet: function(d){
                        return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
                    }},
                    {fixed: 'right', title: '操作', width: 150, toolbar: '#userToolbar'}
                ]]
            });

            // 歌单表格
            table.render({
                elem: '#playlistTable',
                url: API_BASE + '/playlist/list',
                page: true,
                limit: 10,
                parseData: function(res){
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || '',
                        "count": res.data.total || 0,
                        "data": res.data.records || []
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'name', title: '歌单名称', width: 200},
                    {field: 'userId', title: '创建者ID', width: 120},
                    {field: 'createTime', title: '创建时间', width: 180},
                    {field: 'introduction', title: '简介'},
                    {fixed: 'right', title: '操作', width: 200, toolbar: '#playlistToolbar'}
                ]]
            });

            // 表格工具条事件监听
            table.on('tool(musicTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    editMusic(data);
                } else if(obj.event === 'delete'){
                    deleteMusic(data);
                } else if(obj.event === 'play'){
                    // 获取当前表格数据作为播放列表
                    var tableData = layui.table.cache.musicTable;
                    currentMusicList = tableData;
                    // 找到当前歌曲在列表中的索引
                    currentMusicIndex = tableData.findIndex(item => item.id === data.id);
                    playMusicById(data);
                }
            });

            table.on('tool(singerTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    editSinger(data);
                } else if(obj.event === 'delete'){
                    deleteSinger(data);
                }
            });

            table.on('tool(albumTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    editAlbum(data);
                } else if(obj.event === 'delete'){
                    deleteAlbum(data);
                }
            });

            table.on('tool(userTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'toggleStatus'){
                    toggleUserStatus(data);
                }
            });

            table.on('tool(playlistTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    editPlaylist(data);
                } else if(obj.event === 'delete'){
                    deletePlaylist(data);
                } else if(obj.event === 'manage'){
                    managePlaylistMusic(data);
                }
            });
        });

        // 加载统计数据
        function loadStats() {
            fetch(API_BASE + '/music/list?page=1&limit=1')
                .then(res => res.json())
                .then(data => {
                    if(data.success && data.data) {
                        document.getElementById('musicCount').textContent = data.data.total || 0;
                    }
                });

            fetch(API_BASE + '/singer/list?page=1&limit=1')
                .then(res => res.json())
                .then(data => {
                    if(data.success && data.data) {
                        document.getElementById('singerCount').textContent = data.data.total || 0;
                    }
                });

            fetch(API_BASE + '/album/list?page=1&limit=1')
                .then(res => res.json())
                .then(data => {
                    if(data.success && data.data) {
                        document.getElementById('albumCount').textContent = data.data.total || 0;
                    }
                });

            fetch(API_BASE + '/user/list?page=1&limit=1')
                .then(res => res.json())
                .then(data => {
                    if(data.success && data.data) {
                        document.getElementById('userCount').textContent = data.data.total || 0;
                    }
                });
        }

        // 播放音乐
        function playMusic() {
            isPlaying = !isPlaying;
            const btn = document.getElementById('playBtn');
            if(isPlaying) {
                btn.innerHTML = '<i class="layui-icon layui-icon-pause"></i> 暂停';
                layui.layer.msg('播放中...');
            } else {
                btn.innerHTML = '<i class="layui-icon layui-icon-play"></i> 播放';
                layui.layer.msg('已暂停');
            }
        }

        function playMusicById(data) {
            document.getElementById('musicName').textContent = data.name;
            document.getElementById('musicSinger').textContent = '歌手ID: ' + (data.singerId || '未知');
            layui.layer.msg('正在播放: ' + data.name);
            isPlaying = true;
            document.getElementById('playBtn').innerHTML = '<i class="layui-icon layui-icon-pause"></i> 暂停';
            
            // 调用后端API增加播放次数
            fetch(API_BASE + '/music/play/' + data.id, {
                method: 'POST'
            }).catch(err => console.log('播放计数失败', err));
        }

        function prevMusic() {
            if (currentMusicList.length === 0) {
                layui.layer.msg('播放列表为空，请先播放一首歌曲');
                return;
            }
            
            // 上一曲：索引减1，如果到头了就循环到最后一首
            currentMusicIndex--;
            if (currentMusicIndex < 0) {
                currentMusicIndex = currentMusicList.length - 1;
            }
            
            var musicData = currentMusicList[currentMusicIndex];
            playMusicById(musicData);
        }

        function nextMusic() {
            if (currentMusicList.length === 0) {
                layui.layer.msg('播放列表为空，请先播放一首歌曲');
                return;
            }
            
            // 下一曲：索引加1，如果到尾了就循环到第一首
            currentMusicIndex++;
            if (currentMusicIndex >= currentMusicList.length) {
                currentMusicIndex = 0;
            }
            
            var musicData = currentMusicList[currentMusicIndex];
            playMusicById(musicData);
        }

        // 刷新列表
        function refreshMusicList() {
            layui.table.reload('musicTable');
            layui.layer.msg('刷新成功');
        }

        function refreshSingerList() {
            layui.table.reload('singerTable');
            layui.layer.msg('刷新成功');
        }

        function refreshAlbumList() {
            layui.table.reload('albumTable');
            layui.layer.msg('刷新成功');
        }

        function refreshUserList() {
            layui.table.reload('userTable');
            layui.layer.msg('刷新成功');
        }

        function refreshPlaylistList() {
            layui.table.reload('playlistTable');
            layui.layer.msg('刷新成功');
        }

        // 添加功能
        function addMusic() {
            layui.layer.open({
                type: 1,
                title: '添加音乐',
                area: ['600px', '500px'],
                content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入歌曲名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">音频URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="url" required lay-verify="required" placeholder="请输入音频文件URL" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">时长(秒)</label>
                            <div class="layui-input-block">
                                <input type="number" name="duration" required lay-verify="required" placeholder="请输入时长" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">专辑ID</label>
                            <div class="layui-input-block">
                                <input type="number" name="albumId" placeholder="请输入专辑ID" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">发行时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="releaseTime" id="musicReleaseTime" placeholder="请选择日期" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="addMusicForm">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                `,
                success: function(){
                    layui.form.render();
                    layui.laydate.render({
                        elem: '#musicReleaseTime',
                        type: 'datetime'
                    });
                    
                    layui.form.on('submit(addMusicForm)', function(data){
                        fetch(API_BASE + '/music', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(data.field)
                        })
                        .then(res => res.json())
                        .then(result => {
                            if(result.success) {
                                layui.layer.msg('添加成功');
                                layui.layer.closeAll();
                                refreshMusicList();
                            } else {
                                layui.layer.msg('添加失败: ' + result.message);
                            }
                        });
                        return false;
                    });
                }
            });
        }

        function addSinger() {
            layui.layer.open({
                type: 1,
                title: '添加歌手',
                area: ['600px', '550px'],
                content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌手名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入歌手名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-block">
                                <select name="type" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                    <option value="组合">组合</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">国籍</label>
                            <div class="layui-input-block">
                                <input type="text" name="nationality" placeholder="请输入国籍" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">风格标签</label>
                            <div class="layui-input-block">
                                <input type="text" name="tags" placeholder="用逗号分隔，如：流行,摇滚" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="avatar" placeholder="请输入头像URL" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-block">
                                <textarea name="introduction" placeholder="请输入简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="addSingerForm">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                `,
                success: function(){
                    layui.form.render();
                    
                    layui.form.on('submit(addSingerForm)', function(data){
                        fetch(API_BASE + '/singer', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(data.field)
                        })
                        .then(res => res.json())
                        .then(result => {
                            if(result.success) {
                                layui.layer.msg('添加成功');
                                layui.layer.closeAll();
                                refreshSingerList();
                            } else {
                                layui.layer.msg('添加失败: ' + result.message);
                            }
                        });
                        return false;
                    });
                }
            });
        }

        function addAlbum() {
            layui.layer.open({
                type: 1,
                title: '添加专辑',
                area: ['600px', '500px'],
                content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">专辑名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入专辑名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌手ID</label>
                            <div class="layui-input-block">
                                <input type="number" name="singerId" required lay-verify="required" placeholder="请输入歌手ID" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">发行公司</label>
                            <div class="layui-input-block">
                                <input type="text" name="company" placeholder="请输入发行公司" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="pic" placeholder="请输入封面URL" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">发行日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="releaseDate" id="albumReleaseDate" placeholder="请选择日期" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-block">
                                <textarea name="introduction" placeholder="请输入简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="addAlbumForm">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                `,
                success: function(){
                    layui.form.render();
                    layui.laydate.render({
                        elem: '#albumReleaseDate',
                        type: 'date'
                    });
                    
                    layui.form.on('submit(addAlbumForm)', function(data){
                        fetch(API_BASE + '/album', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(data.field)
                        })
                        .then(res => res.json())
                        .then(result => {
                            if(result.success) {
                                layui.layer.msg('添加成功');
                                layui.layer.closeAll();
                                refreshAlbumList();
                            } else {
                                layui.layer.msg('添加失败: ' + result.message);
                            }
                        });
                        return false;
                    });
                }
            });
        }

        function addPlaylist() {
            layui.layer.open({
                type: 1,
                title: '创建歌单',
                area: ['600px', '400px'],
                content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入歌单名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建者ID</label>
                            <div class="layui-input-block">
                                <input type="number" name="userId" required lay-verify="required" placeholder="请输入用户ID" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="coverImage" placeholder="请输入封面URL" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-block">
                                <textarea name="introduction" placeholder="请输入简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="addPlaylistForm">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                `,
                success: function(){
                    layui.form.render();
                    
                    layui.form.on('submit(addPlaylistForm)', function(data){
                        fetch(API_BASE + '/playlist', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(data.field)
                        })
                        .then(res => res.json())
                        .then(result => {
                            if(result.success) {
                                layui.layer.msg('创建成功');
                                layui.layer.closeAll();
                                refreshPlaylistList();
                            } else {
                                layui.layer.msg('创建失败: ' + result.message);
                            }
                        });
                        return false;
                    });
                }
            });
        }

        // 编辑功能
        function editMusic(data) {
            layui.layer.msg('编辑音乐: ' + data.name);
        }

        function editSinger(data) {
            layui.layer.msg('编辑歌手: ' + data.name);
        }

        function editAlbum(data) {
            layui.layer.msg('编辑专辑: ' + data.name);
        }

        function editPlaylist(data) {
            layui.layer.msg('编辑歌单: ' + data.name);
        }

        // 删除功能
        function deleteMusic(data) {
            layui.layer.confirm('确定删除音乐: ' + data.name + '?', function(index){
                fetch(API_BASE + '/music/' + data.id, { method: 'DELETE' })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('删除成功');
                            refreshMusicList();
                        } else {
                            layui.layer.msg('删除失败: ' + result.message);
                        }
                        layui.layer.close(index);
                    });
            });
        }

        function deleteSinger(data) {
            layui.layer.confirm('确定删除歌手: ' + data.name + '?', function(index){
                fetch(API_BASE + '/singer/' + data.id, { method: 'DELETE' })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('删除成功');
                            refreshSingerList();
                        } else {
                            layui.layer.msg('删除失败: ' + result.message);
                        }
                        layui.layer.close(index);
                    });
            });
        }

        function deleteAlbum(data) {
            layui.layer.confirm('确定删除专辑: ' + data.name + '?', function(index){
                fetch(API_BASE + '/album/' + data.id, { method: 'DELETE' })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('删除成功');
                            refreshAlbumList();
                        } else {
                            layui.layer.msg('删除失败: ' + result.message);
                        }
                        layui.layer.close(index);
                    });
            });
        }

        function deletePlaylist(data) {
            layui.layer.confirm('确定删除歌单: ' + data.name + '?', function(index){
                fetch(API_BASE + '/playlist/' + data.id, { method: 'DELETE' })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('删除成功');
                            refreshPlaylistList();
                        } else {
                            layui.layer.msg('删除失败: ' + result.message);
                        }
                        layui.layer.close(index);
                    });
            });
        }

        function toggleUserStatus(data) {
            const newStatus = data.status == 1 ? 0 : 1;
            const action = newStatus == 1 ? '启用' : '禁用';
            
            layui.layer.confirm('确定' + action + '用户: ' + data.username + '?', function(index){
                fetch(API_BASE + '/user/status/' + data.id + '?status=' + newStatus, { method: 'PUT' })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg(action + '成功');
                            refreshUserList();
                        } else {
                            layui.layer.msg(action + '失败: ' + result.message);
                        }
                        layui.layer.close(index);
                    });
            });
        }

        function managePlaylistMusic(data) {
            layui.layer.msg('管理歌单音乐: ' + data.name);
        }
    </script>

    <!-- 表格操作工具条模板 -->
    <script type="text/html" id="musicToolbar">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="play"><i class="layui-icon layui-icon-play"></i> 播放</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script type="text/html" id="singerToolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script type="text/html" id="albumToolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script type="text/html" id="userToolbar">
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="toggleStatus">切换状态</a>
    </script>

    <script type="text/html" id="playlistToolbar">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="manage">管理音乐</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
</body>
</html>